const CanvasWidth = 600 // canvas宽高
const CanvasHeight = 600
const QueueSize = 7 // 缓冲队列大小
const BlockSize = 60 // 块尺寸

const canvas = document.getElementById('canvas')
const queueBox = document.querySelector('.queue')
const ctx = canvas.getContext('2d')
let map // 地图
let map2
let queue // 队列

    // init
;(() => {
    canvas.height = CanvasHeight
    canvas.width = CanvasWidth
    drawBg()
    // fill background
    document.getElementsByClassName('queue')[0].style.width = QueueSize * BlockSize + 'px'
    queue = new Queue(QueueSize)
    map = new GameMap(CanvasWidth / BlockSize, CanvasHeight / BlockSize, 0, 10, 3)
    map2 = new GameMap((CanvasWidth - 50) / BlockSize, (CanvasHeight - 50) / BlockSize, 25, 5, 3)
    map.draw()
    map2.draw()
})()
function drawBg() {
    ctx.fillStyle = '#eee'
    ctx.fillRect(0, 0, CanvasWidth, CanvasHeight)
}

canvas.addEventListener('click', e => {
    // 这里的顺序是反的
    const X = e.offsetY
    const Y = e.offsetX
    const indexX = parseInt(X / BlockSize)
    const indexY = parseInt(Y / BlockSize)
    // 这里应该遍历判断哪层地图是最顶层
    const value = map.data[indexX][indexY].type
    if (!value) return
    // 更新地图数据，并重新绘制地图
    map.update({ indexX, indexY }, null)
    // 更新队列并在isFull方法中处理数据和操作DOM
    queue.push({
        originX: indexX,
        originY: indexY,
        source: { type: value }
    })
    if (queue.isFull()) {
        alert('GameOver')
        map.reset()
    }
})
